<template>
	<div>
		<HfTable :data-array="positions?.filter((x) => x.Position > 0) || []" :options="options" :default-sort="{ prop: 'InstrumentID,PosiDirection' }">
			<template #PosiDirection="{ scope, editing }">
				{{ scope.row.PosiDirection === 50 ? '多' : '空' }}
			</template>
			<template #PositionCost="{ scope, editing }">
				{{ scope.row.PositionCost.toFixed(2) }}
			</template>
			<template #PositionProfit="{ scope, editing }">
				{{ scope.row.PositionProfit.toFixed(2) }}
			</template>
			<template #UseMargin="{ scope, editing }">
				{{ scope.row.UseMargin.toFixed(2) }}
			</template>
		</HfTable>
	</div>
</template>

<script setup lang="ts">
import type { TableOptions } from '~/components/types'

const { data: positions, refresh: refreshPosition } = useHttp.getLazy<Position[]>('/position')
const options: TableOptions[] = [
	{
		label: '合约',
		prop: 'InstrumentID',
		width: 100,
	},
	{
		label: '多空',
		prop: 'PosiDirection',
		width: 100,
		useSlot: true,
	},
	{
		label: '总持',
		prop: 'Position',
		width: 100,
	},
	{
		label: '昨仓',
		prop: 'YdPosition',
		width: 100,
	},
	{
		label: '今仓',
		prop: 'TodayPosition',
		width: 100,
	},
	{
		label: '可平',
		prop: 'InstrumentID',
		width: 100,
	},
	{
		label: '持仓均价',
		prop: 'PositionCost',
		width: 100,
		useSlot: true,
	},
	{
		label: '持仓盈亏',
		prop: 'PositionProfit',
		width: 100,
		useSlot: true,
	},
	{
		label: '占用保证金',
		prop: 'UseMargin',
		width: 100,
		useSlot: true,
	},
]

onMounted(() => refreshPosition())
</script>

<style scoped></style>
